<script setup>
import { onMounted, watch, ref } from 'vue';
import { queryAllclazzApi, addclazzApi } from '@/api/clazz';
import { ElMessage } from 'element-plus';

const subjects = ref([{ name: 'java', value: 1 }, { name: '前端', value: 2 }, { name: '大数据', value: 3 }, { name: 'Python', value: 4 }, { name: 'Go', value: 5 }, { name: '嵌入式', value: 6 }]);
const masterIDs = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const clazzList = ref([]);
const size = ref(''); // 分页组件的尺寸

const employee = ref({
  id: '',
  name: '',
  room: '',
  beginDate: '',
  endDate: '',
  masterID: null, // 初始化masterID
  subject: '',
});

const searchEmp = ref({
  name: '',
  date: [],
  begin: '',
  end: ''
});

const rules = ref({
  name: [
    { required: true, message: '请输入班级名称', trigger: 'blur' },
  ],
  room: [
    { required: true, message: '请输入班级教室', trigger: 'blur' },
  ],
  beginDate: [
    { required: true, message: '请选择开课时间', trigger: 'change' },
  ],
  endDate: [
    { required: true, message: '请选择结课时间', trigger: 'change' },
  ],
  masterID: [
    { required: true, message: '请选择班主任', trigger: 'change' },
  ],
  subject: [
    { required: true, message: '请选择学科', trigger: 'change' },
  ],
});

const clear = () => {
  searchEmp.value = {
    name: '',
    date: [],
    begin: '',
    end: ''
  };
};

onMounted(() => {
  search();
  queryAllclazzs();
});

const queryAllclazzs = async () => {
  const result = await queryAllclazzApi();
  if (result.code) {
    masterIDs.value = result.data;
  } else {
    ElMessage.error(result.msg);
  }
};

const search = async () => {
  const result = await queryAllclazzApi(searchEmp.value.name, searchEmp.value.begin, searchEmp.value.end, currentPage.value, pageSize.value);
  if (result.code) {
    clazzList.value = result.data.rows;
    total.value = result.data.total;
  } else {
    ElMessage.error(result.msg);
  }
};

const handleSizeChange = (val) => {
  pageSize.value = val;
  search();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  search();
};

const dialogVisible = ref(false);
const dialogTitle = ref('新增员工');

const addclazz = () => {
  employee.value = {
    id: '',
    name: '',
    room: '',
    beginDate: '',
    endDate: '',
    masterID: null, // 重置masterID
    subject: '',
  };
  dialogVisible.value = true;
  dialogTitle.value = '新增员工';
};

const save = async () => {
  const result = await addclazzApi(employee.value);
  if (result.code) {
    dialogVisible.value = false;
    ElMessage.success('保存成功');
    search();
  } else {
    ElMessage.error(result.msg);
  }
};

watch(() => searchEmp.value.date, (newDate, oldDate) => {
  if (newDate.length === 2) {
    searchEmp.value.begin = newDate[0];
    searchEmp.value.end = newDate[1];
  } else {
    searchEmp.value.begin = '';
    searchEmp.value.end = '';
  }
}, { immediate: true });

const edit = (id) => {
  // 根据id获取数据并填充到employee，然后显示对话框
  // 这里需要实现具体的编辑逻辑
};

const deleteById = (id, name) => {
  // 调用删除API，并更新列表
  // 这里需要实现具体的删除逻辑
};
</script>

<template>
  <h1>班级管理</h1>
  <el-form :inline="true" :model="searchEmp" class="demo-form-inline">
    <el-form-item label="班级名称:">
      <el-input v-model="searchEmp.name" placeholder="请输入班级名称" clearable />
    </el-form-item>
    <el-form-item label="入职日期">
      <el-date-picker v-model="searchEmp.date" type="daterange" value-format="YYYY-MM-DD" range-separator="到"
        start-placeholder="起始日期" end-placeholder="结束日期" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search">查询</el-button>
      <el-button type="info" @click="clear">重置</el-button>
    </el-form-item>
  </el-form>
  <div class="btn-box-top">
    <el-button type="primary" @click="addclazz" size="small">+ 新增员工</el-button>
  </div>
  <el-table :data="clazzList" style="width: 100%">
    <el-table-column prop="id" label="序号" width="180"></el-table-column>
    <el-table-column prop="name" label="班级名称"></el-table-column>
    <el-table-column prop="room" label="班级教室"></el-table-column>
    <el-table-column prop="masterName" label="班主任姓名"></el-table-column>
    <el-table-column prop="beginDate" label="开课时间"></el-table-column>
    <el-table-column prop="endDate" label="结课时间"></el-table-column>
    <el-table-column prop="status" label="状态"></el-table-column>
    <el-table-column prop="createTime" label="最后的操作时间"></el-table-column>
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button type="primary" size="small" @click="edit(scope.row.id)">编辑</el-button>
        <el-button type="danger" size="small" @click="deleteById(scope.row.id, scope.row.name)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[100, 200, 300, 400]"
    :size="size"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
  <el-dialog v-model="dialogVisible" :title="dialogTitle">
    <el-form :model="employee" label-width="80px" :rules="rules">
      <el-form-item label="班级名称" prop="name">
        <el-input v-model="employee.name" placeholder="请输入班级名称" />
      </el-form-item>
      <el-form-item label="班级教室" prop="room">
        <el-input v-model="employee.room" placeholder="请输入班级教室" />
      </el-form-item>
      <el-form-item label="开课时间" prop="beginDate">
        <el-date-picker v-model="employee.beginDate" type="date" placeholder="请选择开课时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
      </el-form-item>
      <el-form-item label="结课时间" prop="endDate">
        <el-date-picker v-model="employee.endDate" type="date" placeholder="请选择结课时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
      </el-form-item>
      <el-form-item label="班主任" prop="masterID">
        <el-select v-model="employee.masterID" placeholder="请选择">
          <el-option v-for="master in masterIDs" :key="master.value" :label="master.name" :value="master.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="学科" prop="subject">
        <el-select v-model="employee.subject" placeholder="请选择">
          <el-option v-for="subject in subjects" :key="subject.value" :label="subject.name" :value="subject.value" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.demo-form-inline .el-input,
.demo-form-inline .el-date-picker {
  width: 180px;
}
</style>